<template>
  <nav class="nav-bar">
    <div class="btn" v-for="(nav, i) in navs" :key="i">
      <span v-if="nav.hasChild">{{ nav.name }}</span>

      <!-- <span v-else @click="changePage(nav.page)">{{ nav.name }}</span> -->

      <!-- <RouterLink v-else :to="nav.page">
        <span>{{ nav.name }}</span>
      </RouterLink> -->

      <RouterLink v-else :to="nav.page" custom #default="{ navigate }">
        <span @click="navigate">{{ nav.name }}</span>
      </RouterLink>

      <div class="btn-items-box" v-if="nav.hasChild">
        <ul class="btn-items">
          <!-- <li v-for="(item, i) in nav.children" :key="i" @click="changePage(item.page)">{{ item.name }}</li> -->
          <RouterLink v-for="(item, i) in nav.children" :key="i" :to="item.page" custom
            #="{ navigate, isActive, isExactActive }">
            <li @click="navigate" :class="{
              'nav-active': isActive,
              'nav-exact-active': isExactActive
            }">
              <!-- {{ item.name }} -->
              {{ item.name }},{{ isActive }},{{ isExactActive }}
            </li>
          </RouterLink>
        </ul>
      </div>
    </div>
  </nav>
  <div>
    <div>$route.path:{{ $route.path }}=$route.meta:{{ $route.meta }}</div>
    <div> <input type="button" value="back" @click="$router.back()"> </div>
    <hr>
      <RouterView v-slot="{ Component }">
        <KeepAlive>
          <Component :is="Component"></Component>
        </KeepAlive>
      </RouterView>
  </div>
  <HomeBtn v-show="!$route.meta.isHide"></HomeBtn>
</template>

<script>
import HomeBtn from "@/index/components/HomeBtn.vue";
export default {
  name: 'App',
  components: {
    HomeBtn
  },
  data() {
    return {
      navs: [
        { name: "默认页", hasChild: false, page: "/default" },
        {
          name: "启动和组成", hasChild: true, children: [
            { name: "启动过程", page: "A" },
            { name: "单文件组件-简单结构", page: "A" },
            { name: "单文件组件-注意事项", page: "/single" },
          ]
        },
        {
          name: "错误处理和静态资源", hasChild: true, children: [
            { name: "错误处理", page: "/error" },
            { name: "静态资源", page: "/error/assets" },
            { name: "资源编译", page: "/error/build" },
          ]
        },
        {
          name: "样式操作", hasChild: true, children: [
            { name: "全局样式和局部样式", page: "/style/global" },
            { name: "样式穿透", page: "/style/deep" },
            { name: "动态样式", page: "/style/sass" },
          ]
        },
        { name: "项目打包", hasChild: false, page: "/build" },
        {
          name: "异步请求", hasChild: true, children: [
            { name: "axios的基本使用", page: "/axios" },
            { name: "axios的拦截器使用", page: "/axios/int" },
            { name: "axios的模块化", page: "/axios/module" },
            { name: "开发代理服务器设置", page: "/axios/proxy" },
          ]
        },
        {
          name: "组合式API", hasChild: true, children: [
            { name: "基本语法定义", hasChild: false, page: "/composition" },
            { name: "组件语法定义", hasChild: false, page: "/composition/comp" },
            { name: "组件生命周期定义", hasChild: false, page: "/composition/lift" },
            { name: "组合式API的实例获取", hasChild: false, page: "/composition/this" },
          ]
        },
        {
          name: "路由", hasChild: true, children: [
            { name: "路由的集成和使用", hasChild: false, page: "/router" },
            { name: "路由嵌套", hasChild: false, page: "/router/parent" },
            { name: "路由路径", hasChild: false, page: "/router/path" },
            { name: "激活路由信息", hasChild: false, page: "/router/active" },
            { name: "懒路由&路由模块化", hasChild: false, page: "/router/lazy" },
            { name: "路由参数", hasChild: false, page: "/router/params" },
            { name: "编程式导航", hasChild: false, page: "/router/code" },
            { name: "路由缓存和守卫", hasChild: false, page: "/router/guard" },
          ]
        },
        {
          name: "中央仓库", hasChild: false, page: "/vuex"
        },
      ]
    }
  },
  // methods: {
  //   changePage(page) {
  //     location.hash = page
  //   }
  // },
}
</script>

<style>
.router-link-active,
.active {
  color: red;
}

.router-link-exact-active,
.exact-active {
  border: 2px solid white;
}

.nav-active {
  background-color: #434a50 !important;
}

.nav-exact-active {
  color: goldenrod !important;
}

.nav-bar {
  background-color: #545c64;
  color: #e9ecf4;
  font-size: 0px;
  padding: 0px 20px;
  box-shadow: 0px 0px 4px #6e7276;
  position: sticky;
  top: 0px;
  z-index: 99;
}

.nav-bar .btn {
  display: inline-block;
  /* min-width: 100px; */
  text-align: center;
  font-size: 16px;
  margin-right: 20px;
  padding: 10px 0px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-bottom: 4px solid transparent;
  position: relative;
}

.nav-bar .btn:hover {
  border-color: #f7ca4b;
}

.nav-bar .btn:hover span {
  color: #f7ca4b;
}

.nav-bar .btn:hover .btn-items {
  display: block;
}

.nav-bar .btn .btn-items-box {
  position: absolute;
  padding: 16px 0px 0px 0px;
  transform: translate(14px, 0px);
  z-index: 99;
}

.nav-bar .btn .btn-items {
  /* position: absolute; */
  background-color: #727981;
  /* transform: translate(40px,24px); */
  margin: 0px;
  padding: 0px;
  list-style: none;
  /* min-width: 200px; */
  text-align: left;
  padding: 10px 0px;
  border-radius: 4px;
  box-shadow: 0px 0px 2px white;
  display: none;
}

.nav-bar .btn .btn-items li {
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-bar .btn .btn-items li:hover {
  background-color: #434a50;
}
</style>
